import { Upload, message, Modal } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { baseURL } from 'utils/request'
import { getToken } from 'utils/settingToken'
import { useState } from 'react'

// 项目上传图片API接口:
//   http://geek.itheima.net/api-pc.html#u4e0au4f20u56feu72470a3ca20id3du4e0au4f20u56feu72473e203ca3e

// listType='picture-card'  展示图片效果
// <PlusOutlined />         加号图标
export default function Test() {
    // const [images, setImages] = useState([])
    const [images, setImages] = useState([
        {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
    ])

    const props = {
        // 文件列表
        fileList: images,
        // 接受上传的文件类型，选择时只展示 .png,.jpg,.jpeg
        accept: '.png,.jpg,.jpeg',
        listType: 'picture-card',
        // maxCount: 3,
        name: 'image',
        action: baseURL + '/v1_0/upload',
        headers: {
            Authorization: `Bearer ${getToken()}`,
        },
        onChange({ file, fileList }) {
            console.log('文件列表发生了变化', { file, fileList })
            // 文件变化(上传，删除，错误)，都需要更新 fileList
            setImages(fileList)
            // 非上传中打印检查数据
            // if (file.status !== 'uploading') {
            //     console.log({ file, fileList })
            // }
            // if (file.status !== 'uploading') {
            //   console.log({ file, fileList })
            // }
            // 上传完成判断
            if (file.status === 'done') {
                // setImages(fileList)
                // message.success(`${file.name} file uploaded successfully`)
                message.success(`${file.name} 上传成功.`)
            }
            // 上传失败判断
            else if (file.status === 'error') {
                // message.error(`${file.name} file upload failed.`)
                message.error(`${file.name} 上传失败.`)
            }
        },
        // 上传前的处理
        beforeUpload: (file) => {
            // 可以通过打印 file.type 查看文件类型
            console.log(file.type)
            // 允许上传的格式
            const isAllowType = ['image/png', 'image/jpeg'].includes(file.type)
            // 如果不是允许的格式
            if (!isAllowType) {
                message.error(`${file.name}文件格式不对`)
            }
            // 如果需要阻止列表展现，可以通过返回 Upload.LIST_IGNORE 实现。
            return isAllowType ? true : Upload.LIST_IGNORE
        },
        // 点击预览小眼睛
        onPreview: (file) => {
            // console.log('被点击预览的文件', file)
            // 设置预览图片地址
            setPreviewImage(file.thumbUrl)
        },
    }

    // 预览图片地址
    const [previewImage, setPreviewImage] = useState('')

    return (
        <div>
            <h1>Upload上传的基本使用</h1>
            <Upload {...props}>{images.length < 3 ? <PlusOutlined /> : null}</Upload>
            <Modal
                visible={previewImage !== ''}
                title={'预览图片'}
                footer={null}
                onCancel={() => setPreviewImage('')}
            >
                <img alt='example' style={{ width: '100%' }} src={previewImage} />
            </Modal>
        </div>
    )
}